<!-- 
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="revenueInfoTwo_box">
      <revenueInFoTitle :title="'经济总收入明细'">
        <p>包括总收入及总支出</p>
      </revenueInFoTitle>
      <div class="reveTwo">
        <div class="revenueInfoTwo_publicBox" v-for="(item,index) in dataAll" :key="index">
          <p>
            <span>{{ item.leftFG }}</span>
            <span>{{ item.val }}</span>
            <span>{{ item.danwei }}</span>
          </p>
          <p>{{ item.title }}</p>
        </div>
      </div>
  </div>
</template>

<script>
import revenueInFoTitle from '../../componentsPage/revenueInFoTitle.vue'
export default {
  name: "revenueInfoTwo",
  components:{
    revenueInFoTitle
  },  
  data() {
    return {
      dataAll:[
        {val:45.6,title:'社区2023年第一季度总收入',danwei:'万',leftFG:'￥'},
        {val:14.9,title:'社区2023年第一季度总支出',danwei:'万',leftFG:'￥'},
      ]
    };
  },
};
</script>

<style scoped lang="less">
.revenueInfoTwo_box {
  width: 300px;
  height: 350px;
  padding: 30px 25px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(17, 26, 52, 0.1);
  .reveTwo{
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
    flex-direction: column;
    .revenueInfoTwo_publicBox{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 10px;
      p{
        &:first-child{
          span{
            font: bold 40px/24px '微软雅黑';
          }
          margin-bottom: 17px;
        }
        &:last-child{
          font: 400 16px/16px '微软雅黑';
        }
      }
    }
  }
}
</style>
